<template>
	<!-- 巡检条目 -->
	<view class="patrol-item">
		<view class="item-head">
			<view>{{ patrolItem.title }}</view>
			<text>尚未到达巡检时间</text>
		</view>
		<view class="item-content">
			<view>编号：<text>{{ patrolItem.no }}</text></view>
			<view>巡检人：<text>{{ patrolItem.person }}</text></view>
			<view>计划时间：<text>{{ patrolItem.startTiem }}</text>至<text>{{patrolItem.endTime}}</text></view>
		</view>
		<u-line></u-line>
		<view class="item-footer">
			<icon-text iconPath="phone" iconPosition="0" :iconText="faultText"></icon-text>
			<button>{{ state }}</button>
		</view>
	</view>
</template>

<script>
	import iconText from '@/components/icon-text.vue'
	export default{
		components:{
			iconText
		},
		data(){
			return{
				state:'异常'
			}
		},
		computed:{
			faultText(){
				return '异常项'+this.patrolItem.faultCount
			}
		},
		props:{
			patrolItem:{
				type:Object,
				default:()=>{}
			}
		}
	}
</script>

<style scoped lang="scss">
	.patrol-item{
		display: flex;
		flex-direction: column;
		.item-head{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.item-content{
			display: flex;
			flex-direction: column;
		}
		.item-footer{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
